<template>
  <view class="student-form">
    <!-- 学号输入 -->
    <view class="form-item">
      <text class="label">学号：</text>
      <input 
        v-model="newStudent.sno" 
        placeholder="请输入学号"
        class="input"
      />
    </view>

    <!-- 姓名输入 -->
    <view class="form-item">
      <text class="label">姓名：</text>
      <input 
        v-model="newStudent.name" 
        placeholder="请输入姓名"
        class="input"
      />
    </view>

    <!-- 年龄输入 -->
    <view class="form-item">
      <text class="label">年龄：</text>
      <input 
        v-model="newStudent.age" 
        placeholder="请输入年龄"
        type="number"
        class="input"
      />
    </view>

    <!-- 性别选择 -->
    <view class="form-item">
      <text class="label">性别：</text>
      <radio-group v-model="newStudent.gender" class="radio-group">
        <label class="radio-label">
          <radio value="男" color="#007AFF" /> 男
        </label>
        <label class="radio-label">
          <radio value="女" color="#007AFF" /> 女
        </label>
      </radio-group>
    </view>

    <!-- 专业选择 -->
    <view class="form-item">
      <text class="label">专业：</text>
      <picker 
        v-model="newStudent.major" 
        :range="majors"
        class="picker"
      >
        <view class="picker-text">
          {{ newStudent.major || '请选择专业' }}
        </view>
      </picker>
    </view>

    <!-- 提交按钮 -->
    <button 
      @click="handleSubmit"
      :style="buttonStyle"
      class="submit-button"
    >
      {{ editIndex === null ? '添加学生' : '更新信息' }}
    </button>
  </view>
</template>

<script>
export default {
  props: {
    newStudent: {
      type: Object,
      default: () => ({
        sno: "",
        name: "",
        age: "",
        gender: "男",
        major: "通信工程"
      })
    },
    editIndex: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      majors: ["通信工程", "人工智能", "计算机科学", "软件工程", "电子信息"]
    }
  },
  computed: {
    buttonStyle() {
      return {
        backgroundColor: this.editIndex === null ? '#4CD964' : '#007AFF',
        color: 'white'
      }
    }
  },
  methods: {
    handleSubmit() {
      if (!this.validateForm()) return
      
      if (this.editIndex === null) {
        this.$emit('add', { ...this.newStudent })
      } else {
        this.$emit('update', { ...this.newStudent })
      }
    },
    validateForm() {
      if (!this.newStudent.sno.trim()) {
        uni.showToast({ title: '学号不能为空', icon: 'none' })
        return false
      }
      if (!this.newStudent.name.trim()) {
        uni.showToast({ title: '姓名不能为空', icon: 'none' })
        return false
      }
      if (!this.newStudent.age || this.newStudent.age <= 0) {
        uni.showToast({ title: '请输入有效年龄', icon: 'none' })
        return false
      }
      return true
    }
  }
}
</script>

<style scoped>
.student-form {
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.label {
  width: 70px;
  font-size: 14px;
  color: #666;
}

.input {
  flex: 1;
  border: 1px solid #ddd;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 14px;
}

.radio-group {
  display: flex;
  flex: 1;
}

.radio-label {
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.picker {
  flex: 1;
}

.picker-text {
  border: 1px solid #ddd;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 14px;
}

.submit-button {
  margin-top: 10px;
  border-radius: 4px;
}
</style>